// JavaScript Document
((function(a){
	//插件本体
	var kplug = function(opts){
		this.boxElement = opts.boxElement?$Q(opts.boxElement):$Q('body')
		this.format = {
			box:$Q('<div class="card card-cpanel"></div>'),	
			boxHead:$Q('<div class="card-head"></div>'),	
			boxBody:$Q('<div class="card-body"></div>'),	
			boxAddbtn:$Q('<button type="button" class="btn btn-small btn-add">增加Item</button>'),
		}
		this.onChange = opts.onChange?opts.onChange:function(){
			console.warn('请使用output监听内容变更');
		};
		this.library = {
			action:opts.action?opts.action:'',//当前
			params:opts.params?opts.params:{},//参数信息
			//item的相关配置
			optsItem:$Q.optionsInput(opts.optsItem,{
				width:'120px',
				height:'80px',	
			}),
		};
		
		//获取值的信息
		this.getVal = function(){
			var data = [];
			$Q(this.format.boxBody).find('.card.card-image').each(function(){
				var itm = {image:$Q(this).attr('data-image')};
				if(opts.useUrl){
					itm.url = $Q(this).find('.card-plugin-slideconfig-input').val();
				}
				data.push(itm);
			});
			return data;
		}
		
		//增加一个主题
		this.createItem = function(itconfig){
			var ths = this;
			var itm = $Q('<div data-image="'+itconfig.image+'" class="card card-image"><img width="100%" height="100%" src="'+itconfig.image+'" /><div class="card-plugin-slideconfig"><input type="text" class="card-plugin-slideconfig-input form-input" placeholder="input click url on this focus" value="'+(itconfig.url?itconfig.url:'')+'" /></div><div class="card-controller"></div></div>');
			$Q(itm).css({
				width:this.library.optsItem.width,
				height:this.library.optsItem.height,
			});
			$Q(itm).children('.card-plugin-slideconfig').css({
				position: 'absolute',
				left: 0,
				top: 0,
				right: 0,
				bottom: 0,
				display: 'flex',
				'align-items': 'center',
    			'justify-content': 'center',
			});
			$Q(itm).find('.card-plugin-slideconfig-input').css({
				width: '80%',	
			});
			$Q(itm).children('.card-controller').css({
				position: 'absolute',
    			bottom: 0,
			});
			if(!opts.useUrl){
				$Q(itm).children('.card-plugin-slideconfig').hide();
			}
			var del = $Q('<button type="button" class="btn btn-small btn-add" style="margin: 0.25em;">删除</button>');
			//var update = $Q('<button type="button" class="btn btn-small btn-edit" style="margin: 0.25em;">更新</button>');
			var prev = $Q('<button type="button" class="btn btn-small btn-prev" style="margin: 0.25em;">&lt;</button>');
			var next = $Q('<button type="button" class="btn btn-small btn-next" style="margin: 0.25em;">&gt;</button>');
			$Q(itm).find('.card-plugin-slideconfig-input').on('keyup',function(){
				ths.onChange();
			});
			$Q(prev).on('click',function(){
				$Q(itm).moveToPrev();
				ths.onChange();
			});
			$Q(next).on('click',function(){
				$Q(itm).moveToNext();
				ths.onChange();	
			});
			$Q(del).on('click',function(){
				$Q(itm).remove();
				ths.onChange();
			});
			$Q(itm).children('.card-controller').append(prev);
			//$Q(itm).children('.card-controller').append(update);
			$Q(itm).children('.card-controller').append(del);
			$Q(itm).children('.card-controller').append(next);
			$Q(this.format.boxBody).append(itm);
			this.onChange();
		}
		
		//创建功能区域
		this.creatFunction = function(){
			var ths = this;
			$Q(this.format.boxAddbtn).on('click',function(){
				$Q.upload({
					action:ths.library.action,
					data:ths.library.params,
					dataType:'json',
					secSize:0,
					success:function(rs){
						rs.data.image = rs.data.url;
						ths.createItem(rs.data);	
					}
				});
			});
		}
		
		//显示UI的完整信息
		this.createUI = function(){
			$Q(this.format.box).append(this.format.boxHead);
			$Q(this.format.box).append(this.format.boxBody);
			$Q(this.format.boxHead).append(this.format.boxAddbtn);
			$Q(this.boxElement).html(this.format.box);
		}
		//创建完整插件
		this.create = function(){
			this.createUI();
			this.creatFunction();
			var data = $Q.jsonDecode(opts.val);
			for(var i = 0;i<data.length;i++){
				this.createItem(data[i]);
			}
		}
		this.create();
	};
	a.kuoqiJs.plugIn.register('sliderConfig',kplug);
})(this))